import React, { Component } from "react";
import { Form, Input, Select, Table, Divider, Button, Modal, DatePicker, Row, Col, Popconfirm } from "antd";
import Content from "../../components/Content/Content";
import moment from "moment";
import "./flow.css";
const { RangePicker } = DatePicker;
const { Item } = Form;
const { confirm } = Modal;
const { Option } = Select;
const { TextArea } = Input;
const InputGroup = Input.Group;

//表格内容数据
const data = [];
for (let i = 0; i < 30; i++) {
  data.push({
    key: i,
    name: `AACC000${i}`,
    number: `${i}`,
    date: `2019/9/${i}`,
    age4: `AACC000${i}`
  });
}

class Query_mediumForm extends Component {
  state = {
    dataSource: [],
    count: 0,

    viewData: {},
    editData: {},
    newData: {},
    searchParams: {},

    filteredInfo: null,
    sortedInfo: null,
    selectedRowKeys: [],

    loading_out_to_first: false,
    loading_out_to_local: false,

    showViewModal: false,
    showEditModal: false,
    showAddModal: false
  };

  handleChange = (pagination, filters, sorter) => {
    console.log("Various parameters", pagination, filters, sorter);
    this.setState({
      filteredInfo: filters,
      sortedInfo: sorter
    });
  };

  onSelectChange = selectedRowKeys => {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  // 删除
  handleDelete = (id) => {
    const dataSource = [...this.state.dataSource];

    const url = global.api.flowscreeningInfo + id + '/';
    return global.deletedata.del(url, {})
    .then(res => {  
      this.setState({ dataSource: dataSource.filter(item => item.id !== id)});
      Modal.success({
        content: '删除成功!',
      });
      this.loadData(1)
    })
    .catch(err => {
      Modal.error({
        content: '删除出错!',
      });
    })    
  }

  // 更新
  handleUpdate = () => {
    const url = global.api.flowscreeningInfo + this.state.editData.id + '/';
    return global.updatedata.put(url, this.state.editData)
    .then(res => {  
      this.loadData(1)
      Modal.success({
        content: '更新成功!',
      });
    })
    .catch(err => {
      Modal.error({
        content: '更新出错!',
      });
    })    
  }

  // 保存
  handleAdd = () => {
    const url = global.api.flowscreeningInfo;
    return global.network.post(url, this.state.newData)
    .then(res => {  
      this.loadData(1)
      Modal.success({
        content: '保存成功!',
      });
    })
    .catch(err => {
      Modal.error({
        content: '保存出错!',
      });
    })    
  }

  //导出到初筛
  outToFirst = () => {
    this.setState({ loading_out_to_first: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading_out_to_first: false
      });
    }, 1000);

    let selectedRowKeys = this.state.selectedRowKeys;
    if(selectedRowKeys) {
      for( let x of selectedRowKeys ) {
        let record = this.state.dataSource[x];
        let id = record.id;
        // TODO 跳转到导出URL
      }
    }   

  };
  // 导出到本地
  outToLocal = () => {
    this.setState({ loading_out_to_local: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading_out_to_local: false
      });
    }, 1000);

    let selectedRowKeys = this.state.selectedRowKeys;
    if(selectedRowKeys) {
      for( let x of selectedRowKeys ) {
        let record = this.state.dataSource[x];
        let id = record.id;
        // TODO 跳转到导出URL
      }
    }   

  };

  //Modal
  showViewModal(showViewModal, viewData = {}) {
    this.setState({ showViewModal, viewData: viewData });
  }
  showEditModal(showEditModal, editData ={}) {
    this.setState({ showEditModal, editData: editData });
  }
  showAddModal(showAddModal) {
    this.setState({ showAddModal });
  }

  loadData = (current = 1) => {
    this.setState({ loading: true });
    // ajax request after empty completing
    setTimeout(() => {
      this.setState({
        selectedRowKeys: [],
        loading: false
      });
    }, 1000);

    const url = global.api.flowscreeningInfo
    + "?lf_id=" + (this.state.searchParams.lf_id || "")
    + "&f_fjypid=" + (this.state.searchParams.f_fjypid || "")
    + "&sxjj_id=" + (this.state.searchParams.sxjj_id || "")
    + "&jzbc_id=" + (this.state.searchParams.jzbc_id || "")
    + "&ferment_time=" + (this.state.searchParams.ferment_time || "")
    + "&f_person=" + (this.state.searchParams.f_person || "")
    + "&f_ph=" + (this.state.searchParams.f_ph || "")
    + "&f_pyjid=" + (this.state.searchParams.f_pyjid || "")
    + "&f_pyjid2=" + (this.state.searchParams.f_pyjid2 || "")
    + "&f_xs=" + (this.state.searchParams.f_xs || "")
    + "&f_volume=" + (this.state.searchParams.f_volume || "")
    + "&f_wd=" + (this.state.searchParams.f_wd || "")
    + "&f_zq=" + (this.state.searchParams.f_zq || "")
    + "&f_tj2=" + (this.state.searchParams.f_tj2 || "")
    + "&flch_method=" + (this.state.searchParams.flch_method || "")
    + "&flch_blsj=" + (this.state.searchParams.flch_blsj || "")
    + "&flow_activity=" + (this.state.searchParams.flow_activity || "")
    + "&flow_volume=" + (this.state.searchParams.flow_volume || "")
    + "&flow_concentration=" + (this.state.searchParams.flow_concentration || "")
    + "&mom_place=" + (this.state.searchParams.mom_place || "")
    + "&son_place=" + (this.state.searchParams.son_place || "")
    + "&flow_remark=" + (this.state.searchParams.flow_remark || "");

    return global.getdata.get(url, {page_index: current, page_size: this.state.pageSize, search: {}})
    .then(res => {
      this.setState({dataSource: res.results, count: res.count})
    })
    .catch(err => {
      Modal.error({
        content: '网络异常!',
      });
    }) 

  }

  componentDidMount() {
    this.loadData(1);
  }

  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 12 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
    const formItemLayoutt = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
    //表格表头数据
    const columns = [
      {
        title: "ID",
        width: 120,
        fixed: "left",
        key: "id",
        dataIndex: "id"
      }, 
      {
        title: "流份编号",
        key: "lf_id",
        dataIndex: "lf_id",
        fixed: "left",
        width: 120,
        sorter: (a, b) => a.number - b.number,
        sortOrder: sortedInfo.columnKey === "lf_id" && sortedInfo.order
      },
      {
        title: "发酵样品编号",
        key: "f_fjypid",
        dataIndex: "f_fjypid"
      },
      {
        title: "筛选菌株编号",
        key: "sxjj_id",
        dataIndex: "sxjj_id"
      },
      {
        title: "菌株保藏编号",
        key: "jzbc_id",
        dataIndex: "jzbc_id"
      },
      {
        title: "发酵人",
        key: "f_person",
        dataIndex: "f_person"
      },
      {
        title: "发酵批号",
        key: "f_ph",
        dataIndex: "f_ph"
      },
      {
        title: "发酵培养基",
        key: "f_pyjid",
        dataIndex: "f_pyjid"
      },
      {
        title: "其它发酵培养基",
        key: "f_pyjid2",
        dataIndex: "f_pyjid2"
      },
      {
        title: "发酵形式",
        key: "f_xs",
        dataIndex: "f_xs"
      },
      {
        title: "发酵体积",
        key: "f_volume",
        dataIndex: "f_volume"
      },
      {
        title: "发酵温度",
        key: "f_wd",
        dataIndex: "f_wd"
      },
      {
        title: "发酵周期",
        key: "f_zq",
        dataIndex: "f_zq"
      },
      {
        title: "其它发酵条件",
        key: "f_tj2",
        dataIndex: "f_tj2"
      },
      {
        title: "分离纯化方法",
        key: "flch_method",
        dataIndex: "flch_method"
      },
      {
        title: "保留时间/(min)",
        key: "flch_blsj",
        dataIndex: "flch_blsj"
      },
      {
        title: "流份药理活性",
        key: "flow_activity",
        dataIndex: "flow_activity"
      },
      {
        title: "流份重量",
        key: "flow_weight",
        dataIndex: "flow_weight"
      },
      {
        title: "流份重量单位",
        key: "unitofweight",
        dataIndex: "unitofweight"
      },
      {
        title: "流份体积",
        key: "flow_volume",
        dataIndex: "flow_volume"
      },
      {
        title: "流份体积单位",
        key: "unitofvolume",
        dataIndex: "unitofvolume"
      },
      {
        title: "流份浓度",
        key: "flow_concentration",
        dataIndex: "flow_concentration"
      },
      {
        title: "母板存放位置",
        key: "mom_place",
        dataIndex: "mom_place"
      },
      {
        title: "子板存放位置",
        key: "son_place",
        dataIndex: "son_place"
      },
      {
        title: "备注",
        key: "flow_remark",
        dataIndex: "flow_remark"
      },
      {
        title: "工作人员姓名",
        key: "worker",
        dataIndex: "worker"
      },
      {
        title: "发酵日期",
        key: "flch_fjrq",
        dataIndex: "flch_fjrq",
        sorter: (a, b) =>
          a.date.replace(/[^\d.]/g, "") - b.date.replace(/[^\d.]/g, ""),
        sortOrder: sortedInfo.columnKey === "flch_fjrq" && sortedInfo.order
      },
      {
        title: "操作",
        dataIndex: "caozuo",
        fixed: "right",
        width: 300,
        render: (text, record) => (
          <span>
            <Button type="dashed" onClick={() => this.showViewModal(true, record)}>
              查看
            </Button>
            <Divider type="vertical" />
            <Button type="dashed" onClick={() => this.showEditModal(true, record)}>
              修改
            </Button>
            <Divider type="vertical" />
            <Popconfirm title="确认删除吗?" onConfirm={() => this.handleDelete(record.id)}>
                <Button type="dashed" >删除</Button>
            </Popconfirm>
          </span>
        )
      }
    ];

    //全部选中/取消全选
    const { loading_out_to_first, loading_out_to_local, selectedRowKeys, count, dataSource } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      hideDefaultSelections: true,
      selections: [
        {
          key: "allData",
          text: "全部选中",
          onSelect: () => {
            this.setState({
              selectedRowKeys: [...Array(count).keys()] // 0...29
            });
          }
        },
        {
          key: "nullData",
          text: "取消全选",
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          }
        }
      ]
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <Form
          {...formItemLayout}
          onSubmit={this.onSubmit}
          colon={false}
          style={{ borderBottom: "20px solid #f0f2f5" }}
        >
          <div style={{ display: "flex" }}>
            <span style={{ flex: 1 }}>
              <Item label="流份编号">
                <Input onChange={e => this.state.searchParams.lf_id =  e.target.value} />
              </Item>
              <Item label="发酵样品编号">
                <Input onChange={e => this.state.searchParams.f_fjypid =  e.target.value} />
              </Item>
              <Item label="筛选菌株编号">
                <Input onChange={e => this.state.searchParams.sxjj_id =  e.target.value} />
              </Item>
              <Item label="菌株保藏编号">
                <Input onChange={e => this.state.searchParams.jzbc_id =  e.target.value} />
              </Item>
            </span>
            <span style={{ flex: 1 }}>
              <Item label="发酵日期">
                <RangePicker
                  onChange={(date, dateString) => this.state.searchParams.ferment_time = dateString}
                  style={{ width: "100%"}}
                  format="YYYY-MM-DD"
                  placeholder={[' ', '']}
                />
              </Item>
              <Item label="发酵人">
                <Input onChange={e => this.state.searchParams.f_person =  e.target.value} />
              </Item>
              <Item label="发酵批号">
                <Input onChange={e => this.state.searchParams.f_ph =  e.target.value} />
              </Item>
              <Item label="发酵培养基">
                <Input onChange={e => this.state.searchParams.f_pyjid =  e.target.value} />
              </Item>
              <Item label="其它发酵培养基">
                <Input onChange={e => this.state.searchParams.f_pyjid2 =  e.target.value} />
              </Item>
            </span>
            <span style={{ flex: 1 }}>

              <Item label="发酵形式">
                <Select
                  // mode="tags"
                  style={{ width: "100%" }}
                  onChange={value => this.state.searchParams.f_xs = value}
                  tokenSeparators={[","]}
                  showArrow={true}
                >
                  <Option value="gt">液体发酵</Option>
                  <Option value="yt">固体发酵</Option>
                  <Option value="qt">其他发酵</Option>
                </Select>
              </Item>
              <Item label="发酵体积">
                <Select
                  // mode="tags"
                  style={{ width: "100%" }}
                  onChange={value => this.state.searchParams.f_volume = value}
                  tokenSeparators={[","]}
                  showArrow={true}
                >
                  <Option value="eb">200ml</Option>
                  <Option value="sb">400ml</Option>
                </Select>
              </Item>
              <Item label="发酵温度">
                <Select
                  // mode="tags"
                  style={{ width: "100%" }}
                  onChange={value => this.state.searchParams.f_wd = value}
                  tokenSeparators={[","]}
                  showArrow={true}
                >
                  <Option value="eb">28℃</Option>
                  <Option value="yl">26℃</Option>
                  <Option value="el">16℃</Option>
                  <Option value="qt">其他</Option>
                </Select>
              </Item>
              <Item label="发酵周期">
                <Select
                  // mode="tags"
                  style={{ width: "100%" }}
                  onChange={value => this.state.searchParams.f_zq = value}
                  tokenSeparators={[","]}
                  showArrow={true}
                >
                  <Option value="st">4d</Option>
                  <Option value="lt">2d</Option>
                </Select>
              </Item>
              <Item label="其它发酵条件">
                <Input onChange={e => this.state.searchParams.f_tj2  = e.target.value} />
              </Item>
            </span>
            <span style={{ flex: 1 }}>
              <Item label="分离纯化方法">
                <TextArea autoSize onChange={e => this.state.searchParams.flch_method  = e.target.value} />
              </Item>
              <Item label="保留时间/(min)">
                <Input onChange={e => this.state.searchParams.flch_blsj  = e.target.value} />
              </Item>
              <Item label="流份药理活性">
                <Input onChange={e => this.state.searchParams.flow_activity  = e.target.value} />
              </Item>
              <Item label="流份重量">
                <Input style={{ width: "60%" }} onChange={e => this.state.searchParams.flow_weight = e.target.value} />
                <InputGroup compact style={{ width: "40%" }}>
                  <Select 
                    // mode="tags"
                    style={{ width: "100%" }}
                    onChange={value => this.state.searchParams.unitofweight = value}
                    tokenSeparators={[","]}
                    showArrow={true}                  
                  >
                    <Option value="mg">mg</Option>
                    <Option value="g">g</Option>
                  </Select>
                </InputGroup>
              </Item>
              <Item label="流份体积">
                <Input style={{ width: "60%" }} onChange={e => this.state.searchParams.flow_volume = e.target.value} />
                <InputGroup compact style={{ width: "40%" }}>
                  <Select
                    // mode="tags"
                    style={{ width: "100%" }}
                    onChange={value => this.state.searchParams.unitofvolume = value}
                    tokenSeparators={[","]}
                    showArrow={true}  
                  >
                    <Option value="ul">ul</Option>
                    <Option value="l">l</Option>
                  </Select>
                </InputGroup>
              </Item>
            </span>
            <span style={{ flex: 1 }}>
              <Item label="流份浓度">
                <Select
                  // mode="tags"
                  style={{ width: "100%" }}
                  onChange={value => this.state.searchParams.flow_concentration = value}
                  tokenSeparators={[","]}
                  showArrow={true}
                >
                <Option value="10mm">10mg/ml</Option>
                <Option value="20mm">20mg/ml</Option>
                </Select>
              </Item>
              <Item label="母板存放位置">
                <Input style={{ width: "60%" }} onChange={e => this.state.searchParams.mom_place  = e.target.value} />
              </Item>
              <Item label="子板存放位置">
                <Input style={{ width: "60%" }} onChange={e => this.state.searchParams.son_place  = e.target.value} />
              </Item>
              <Item label="备注">
                <TextArea autoSize  style={{ width: "60%" }} onChange={e => this.state.searchParams.flow_remark  = e.target.value} />
              </Item>
            </span>
          </div>
          <Item wrapperCol={{ span: 10, offset: 2 }} >
            <Row guuter={16}>
              <Col span={5}>
                <Button type="primary" loading={this.state.loading} onClick={()=>this.loadData(1)}>
                  精确查询
                </Button>
              </Col>
              <Col span={5}>
              </Col>
              <Col span={5}>
               
              </Col>
            </Row>
          </Item>
        </Form>

        <Button
          type="primary"
          onClick={this.outToFirst}
          disabled={!hasSelected}
          loading={loading_out_to_first}
          style={{ marginLeft: 20, marginTop: 20 }}
        >
          导出到初筛
        </Button>
        <span style={{ marginLeft: 8 }}>
          {hasSelected ? `选中 ${selectedRowKeys.length} 个` : ""}
        </span>
        <Button
          type="primary"
          onClick={this.outToLocal}
          disabled={!hasSelected}
          loading={loading_out_to_local}
          style={{ marginLeft: 20, marginTop: 20 }}
        >
          导出到本地
        </Button>
        <Button type="primary" onClick={() => this.showAddModal(true)} style={{ marginLeft: 20, marginTop: 20 }}>添加流份</Button>

        <span style={{ marginLeft: 8 }}>
          {hasSelected ? `选中 ${selectedRowKeys.length} 个` : ""}
        </span>

        <div>
          <Modal
            title=" 查看 "
            centered
            visible={this.state.showViewModal}
            onOk={() => this.showViewModal(false)}
            onCancel={() => this.showViewModal(false)}
            maskClosable={false}
          >
            <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{ display: "flex" }}>
                <span style={{ flex: 1 }}>
                  <Item label="任务编号">
                      <Input value={this.state.viewData.id } />
                  </Item>
                  <Item label="流份编号">
                      <Input value={this.state.viewData.lf_id } />
                  </Item>
                  <Item label="发酵样品编号">
                      <Input value={this.state.viewData.f_fjypid } />
                  </Item>
                  <Item label="筛选菌株编号">
                      <Input value={this.state.viewData.sxjj_id } />
                  </Item>
                  <Item label="菌株保藏编号">
                      <Input value={this.state.viewData.jzbc_id } />
                  </Item>
                  <Item label="发酵日期">
                      <Input value={this.state.viewData.flch_fjrq  } />
                  </Item>
                  <Item label="发酵人">
                      <Input value={this.state.viewData.f_person } />
                  </Item>
                  <Item label="发酵批号">
                      <Input value={this.state.viewData.f_ph } />
                  </Item>
                  <Item label="发酵培养基">
                      <Input value={this.state.viewData.f_pyjid } />
                  </Item>
                  <Item label="其它发酵培养基">
                      <Input value={this.state.viewData.f_pyjid2 } />
                  </Item>
                  <Item label="发酵形式">
                      <Input value={this.state.viewData.f_xs  } />
                  </Item>
                  <Item label="发酵体积">
                      <Input value={this.state.viewData.f_volume } />
                  </Item>
                  <Item label="发酵温度">
                      <Input value={this.state.viewData.f_wd } />
                  </Item>
                </span>
                <span style={{ flex: 1 }}>
                  <Item label="发酵周期">
                      <Input value={this.state.viewData.f_zq  } />
                  </Item>
                  <Item label="其它发酵条件">
                      <Input value={this.state.viewData.f_tj2  } />
                  </Item>
                  <Item label="分离纯化方法">
                      <TextArea autoSize  value={this.state.viewData.flch_method  } />
                  </Item>
                  <Item label="保留时间/(min)">
                      <Input value={this.state.viewData.flch_blsj  } />
                  </Item>
                  <Item label="流份药理活性">
                      <Input value={this.state.viewData.flow_activity  } />
                  </Item>
                  <Item label="流份重量">
                      <Input value={this.state.viewData.flow_weight + this.state.viewData.unitofweight } />
                  </Item>
                  <Item label="流份体积">
                      <Input value={this.state.viewData.flow_volume + this.state.viewData.unitofvolume } />
                  </Item>
                  <Item label="流份浓度">
                      <Input value={this.state.viewData.flow_concentration } />
                  </Item>
                  <Item label="母板存放位置">
                      <Input value={this.state.viewData.mom_place  } />
                  </Item>
                  <Item label="子板存放位置">
                      <Input value={this.state.viewData.son_place  } />
                  </Item>
                  <Item label="备注">
                      <TextArea autoSize ={{ minRows: 2 }} value={this.state.viewData.flow_remark  } />
                  </Item>
                  <Item label="工作人员姓名">
                      <Input value={this.state.viewData.worker } />
                  </Item>
                </span>
              </div>
            </Form>
          </Modal>
          <Modal
            title="修改"
            centered
            visible={this.state.showEditModal}
            onOk={() => this.showEditModal(false)}
            onCancel={() => this.showEditModal(false)}
            maskClosable={false}
          >
            <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{ display: "flex" }}>
                <span style={{ flex: 1 }}>
                  <Item label="任务编号">
                      <Input value={this.state.editData.id } onChange={e => this.state.editData.id = e.target.value } />
                  </Item>
                  <Item label="流份编号">
                      <Input value={this.state.editData.lf_id } onChange={e => this.state.editData.lf_id = e.target.value } />
                  </Item>
                  <Item label="发酵样品编号">
                      <Input value={this.state.editData.f_fjypid } onChange={e => this.state.editData.f_fjypid = e.target.value } />
                  </Item>
                  <Item label="筛选菌株编号">
                      <Input value={this.state.editData.sxjj_id } onChange={e => this.state.editData.sxjj_id = e.target.value } />
                  </Item>
                  <Item label="菌株保藏编号">
                      <Input value={this.state.editData.jzbc_id } onChange={e => this.state.editData.jzbc_id = e.target.value } />
                  </Item>
                  <Item label="发酵日期">
                    <DatePicker
                      style={{ width: "100%" }}
                      format="YYYY-MM-DD HH:mm:ss"
                      defaultValue={moment(this.state.editData.flch_fjrq )}
                      onChange={(date, dateString) => this.state.editData.flch_fjrq  = dateString}
                      dateRender={current => {
                        const style = {};
                        if (current.date() === 1) {
                          style.border = "1px solid #1890ff";
                          style.borderRadius = "50%";
                        }
                        return (
                          <div className="ant-calendar-date" style={style}>
                            {current.date()}
                          </div>
                        );
                      }}
                    />
                  </Item>
                  <Item label="发酵人">
                      <Input value={this.state.editData.f_person } onChange={e => this.state.editData.f_person = e.target.value } />
                  </Item>
                  <Item label="发酵批号">
                      <Input value={this.state.editData.f_ph } onChange={e => this.state.editData.f_ph = e.target.value } />
                  </Item>
                  <Item label="发酵培养基">
                      <Input value={this.state.editData.f_pyjid } onChange={e => this.state.editData.f_pyjid = e.target.value } />
                  </Item>
                  <Item label="其它发酵培养基">
                      <Input value={this.state.editData.f_pyjid2 } onChange={e => this.state.editData.f_pyjid2 = e.target.value } />
                  </Item>
                  <Item label="发酵形式">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      defaultValue={this.state.editData.f_xs }
                      onChange={value => this.state.editData.f_xs  = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="gt">液体发酵</Option>
                    <Option value="yt">固体发酵</Option>
                    <Option value="qt">其他发酵</Option>
                    </Select>
                  </Item>
                  <Item label="发酵体积">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      defaultValue={this.state.editData.f_volume}
                      onChange={value => this.state.editData.f_volume = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="eb">200ml</Option>
                    <Option value="sb">400ml</Option>
                    </Select>
                  </Item>
                  <Item label="发酵温度">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      defaultValue={this.state.editData.f_wd }
                      onChange={value => this.state.editData.f_wd = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="eb">28℃</Option>
                    <Option value="yl">26℃</Option>
                    <Option value="el">16℃</Option>
                    <Option value="qt">其他</Option>
                    </Select>
                  </Item>
                </span>
                <span style={{ flex: 1 }}>
                  <Item label="发酵周期">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      defaultValue={this.state.editData.f_zq }
                      onChange={value => this.state.editData.f_zq  = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="st">4d</Option>
                    <Option value="lt">2d</Option>
                    </Select>
                  </Item>
                  <Item label="其它发酵条件">
                      <Input value={this.state.editData.f_tj2  } onChange={e => this.state.editData.f_tj2  = e.target.value } />
                  </Item>
                  <Item label="分离纯化方法">
                      <TextArea autoSize ={{ minRows: 2 }} value={this.state.editData.flch_method } onChange={e => this.state.editData.flch_method  = e.target.value } />
                  </Item>
                  <Item label="流份制备人">
                      <Input value={this.state.editData.worker } onChange={e => this.state.editData.worker = e.target.value } />
                  </Item>
                  <Item label="保留时间/min)">
                      <Input value={this.state.editData.flch_blsj   } onChange={e => this.state.editData.flch_blsj   = e.target.value } />
                  </Item>
                  <Item label="流份药理活性">
                      <Input value={this.state.editData.flow_activity  } onChange={e => this.state.editData.flow_activity  = e.target.value } />
                  </Item>
                  <Item label="流份重量">                   
                    <Input style={{ width: "80%" }} value={this.state.editData.flow_weight } onChange={e => this.state.editData.flow_weight = e.target.value } />
                    <InputGroup compact style={{ width: "20%" }}>
                      <Select 
                      // mode="tags"
                      style={{ width: "100%" }}
                      defaultValue={this.state.editData.unitofweight }
                      onChange={value => this.state.editData.unitofweight  = value}
                      tokenSeparators={[","]}
                      showArrow={true}>
                        <Option value="passage">mg</Option>
                        <Option value="methane">g</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="流份体积">
                    <Input style={{ width: "80%" }} value={this.state.editData.flow_volume } onChange={e => this.state.editData.flow_volume = e.target.value } />
                    <InputGroup compact style={{ width: "20%" }}>
                      <Select 
                      // mode="tags"
                      style={{ width: "100%" }}
                      defaultValue={this.state.editData.unitofvolume }
                      onChange={value => this.state.editData.unitofvolume  = value}
                      tokenSeparators={[","]}
                      showArrow={true}>
                        <Option value="passage">ul</Option>
                        <Option value="methane">l</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="流份浓度">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      defaultValue={this.state.editData.flow_concentration}
                      onChange={value => this.state.editData.flow_concentration = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="10mm">10mg/ml</Option>
                    <Option value="20mm">20mg/ml</Option>
                    </Select>
                  </Item>
                  <Item label="母板存放位置">
                      <Input value={this.state.editData.mom_place  } onChange={e => this.state.editData.mom_place  = e.target.value } />
                  </Item>
                  <Item label="子板存放位置">
                      <Input value={this.state.editData.son_place  } onChange={e => this.state.editData.son_place  = e.target.value } />
                  </Item>
                  <Item label="备注">
                      <TextArea autoSize ={{ minRows: 2 }} value={this.state.editData.flow_remark  } onChange={e => this.state.editData.flow_remark  = e.target.value } />
                  </Item>
                  <Button onClick={this.handleUpdate} type="primary" style={{marginLeft:'200px'}}>保存</Button>
                </span>
              </div>
            </Form>
          </Modal>
          <Modal
            title="添加流份"
            centered
            visible={this.state.showAddModal}
            onOk={() => this.showAddModal(false)}
            onCancel={() => this.showAddModal(false)}
            maskClosable={false}
          >
            <Form {...formItemLayoutt} onSubmit={this.onSubmit} colon={false}>
              <div style={{ display: "flex" }}>
                <span style={{ flex: 1 }}>
                <Item label="任务编号">
                      <Input onChange={e => this.state.editData.id = e.target.value } />
                  </Item>
                  <Item label="流份编号">
                      <Input onChange={e => this.state.newData.lf_id = e.target.value } />
                  </Item>
                  <Item label="发酵样品编号">
                      <Input onChange={e => this.state.newData.f_fjypid = e.target.value } />
                  </Item>
                  <Item label="筛选菌株编号">
                      <Input onChange={e => this.state.newData.sxjj_id = e.target.value } />
                  </Item>
                  <Item label="菌株保藏编号">
                      <Input onChange={e => this.state.newData.jzbc_id = e.target.value } />
                  </Item>
                  <Item label="发酵日期" >
                    <DatePicker
                      style={{ width: "100%" }}
                      format="YYYY-MM-DD HH:mm:ss"
                      onChange={(date, dateString) => this.state.newData.flch_fjrq  = dateString}
                      dateRender={current => {
                        const style = {};
                        if (current.date() === 1) {
                          style.border = "1px solid #1890ff";
                          style.borderRadius = "50%";
                        }
                        return (
                          <div className="ant-calendar-date" style={style}>
                            {current.date()}
                          </div>
                        );
                      }}
                    />
                  </Item>
                  <Item label="发酵人">
                      <Input onChange={e => this.state.newData.f_person = e.target.value } />
                  </Item>
                  <Item label="发酵批号">
                      <Input onChange={e => this.state.newData.f_ph = e.target.value } />
                  </Item>
                  <Item label="发酵培养基">
                      <Input onChange={e => this.state.newData.f_pyjid = e.target.value } />
                  </Item>
                  <Item label="其它发酵培养基">
                      <Input onChange={e => this.state.newData.f_pyjid2 = e.target.value } />
                  </Item>
                  <Item label="发酵形式">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      onChange={value => this.state.newData.f_xs  = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="gt">液体发酵</Option>
                    <Option value="yt">固体发酵</Option>
                    <Option value="qt">其他发酵</Option>
                    </Select>
                  </Item>
                  <Item label="发酵体积">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      onChange={value => this.state.newData.f_volume = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="eb">200ml</Option>
                    <Option value="sb">400ml</Option>
                    </Select>
                  </Item>
                  <Item label="发酵温度">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      onChange={value => this.state.newData.f_wd = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="eb">28℃</Option>
                    <Option value="yl">26℃</Option>
                    <Option value="el">16℃</Option>
                    <Option value="qt">其他</Option>
                    </Select>
                  </Item>
                </span>
                <span style={{ flex: 1 }}>
                  <Item label="发酵周期">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      onChange={value => this.state.newData.f_zq  = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                    <Option value="st">4d</Option>
                    <Option value="lt">2d</Option>
                    </Select>
                  </Item>
                  <Item label="其它发酵条件">
                      <Input onChange={e => this.state.newData.f_tj2  = e.target.value } />
                  </Item>
                  <Item label="分离纯化方法">
                      <TextArea autoSize ={{ minRows: 2 }} onChange={e => this.state.newData.flch_method  = e.target.value } />
                  </Item>
                  <Item label="流份制备人">
                      <Input onChange={e => this.state.newData.worker = e.target.value } />
                  </Item>
                  <Item label="保留时间/min)">
                      <Input onChange={e => this.state.newData.flch_blsj   = e.target.value } />
                  </Item>
                  <Item label="流份药理活性">
                      <Input onChange={e => this.state.newData.flow_activity  = e.target.value } />
                  </Item>
                  <Item label="流份重量">                   
                    <Input style={{ width: "80%" }} onChange={e => this.state.newData.flow_weight = e.target.value } />
                    <InputGroup compact style={{ width: "20%" }}>
                      <Select defaultValue="mg"
                      // mode="tags"
                      style={{ width: "100%" }}
                      onChange={value => this.state.editData.unitofweight  = value}
                      tokenSeparators={[","]}
                      showArrow={true}>
                        <Option value="passage">mg</Option>
                        <Option value="methane">g</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="流份体积">
                    <Input style={{ width: "80%" }} onChange={e => this.state.newData.flow_volume = e.target.value } />
                    <InputGroup compact style={{ width: "20%" }}>
                      <Select defaultValue="ul"
                      // mode="tags"
                      style={{ width: "100%" }}
                      onChange={value => this.state.editData.unitofvolume  = value}
                      tokenSeparators={[","]}
                      showArrow={true}>
                        <Option value="passage">ul</Option>
                        <Option value="methane">l</Option>
                      </Select>
                    </InputGroup>
                  </Item>
                  <Item label="流份浓度">
                    <Select
                      // mode="tags"
                      style={{ width: "100%" }}
                      onChange={value => this.state.newData.flow_concentration = value}
                      tokenSeparators={[","]}
                      showArrow={true}
                    >
                      <Option value="10mm">10mg/ml</Option>
                      <Option value="20mm">20mg/ml</Option>
                    </Select>
                  </Item>
                  <Item label="母板存放位置">
                      <Input onChange={e => this.state.newData.mom_place  = e.target.value } />
                  </Item>
                  <Item label="子板存放位置">
                      <Input onChange={e => this.state.newData.son_place  = e.target.value } />
                  </Item>
                  <Item label="备注">
                      <TextArea autoSize ={{ minRows: 2 }} onChange={e => this.state.newData.flow_remark  = e.target.value } />
                  </Item>
                  <Button type="primary" style={{marginLeft:'200px'}} onClick={this.handleAdd} >保存</Button>
                </span>
              </div>
            </Form>
          </Modal>
        </div>
        <Table
          rowSelection={rowSelection}
          bordered={true}
          columns={columns}
          dataSource={this.state.dataSource}
          onChange={this.handleChange}
          // pagination={{ pageSize: 20 }} //设置第一页默认显示的列
          // scroll={{ y: 500 }}
          // scroll={{ x: 4000 }}
          scroll={{ x: 4000, y: 300 }}
        />
      </div>
    );
  }
}
const WrapperedQuery_mediumForm = Form.create({
  name: "query medium"
})(Query_mediumForm);

class FlowScreenInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  onSubmit = () => {
    const { form } = this.form.props;
    form.validateFields((errs, values) => {
      console.log(errs, values);
    });
  };
  render() {
    return (
      <Content>
        <WrapperedQuery_mediumForm
          wrappedComponentRef={ref => (this.form = ref)}
          onSubmit={this.onSubmit}
        />
      </Content>
    );
  }
}

export default FlowScreenInfo;
